import { useState, forwardRef, useImperativeHandle, useEffect } from 'react'
import { Button, Popup, Space, Checkbox, Modal } from 'antd-mobile'

// eslint-disable-next-line react/display-name
const Calendar = forwardRef((props, ref) => {
  const { value, children, onConfirm, spacename, timeList = [], spaceDesc } = props;
    const [open, setOpen] = useState(false);
    const [selectList, setSelectList] = useState([]);
    useEffect(() => {
      if (open) {
        setSelectList(value?.[1] || []);
      } else {
        setSelectList([]);
      }
    }, [open])

    const onFinish = () => {
      console.log(selectList);
      // eslint-disable-next-line no-unsafe-optional-chaining
      const [selectLength, selectTime] = selectList?.sort()?.reduce((p,n) => {
        if (!p[2]) {
          const pre = p[1]?.split('-');
          const next = n?.split('-');
          if (pre[1] === next[0]) {
            return [p[0] + 1, `${pre[0]}-${next[1]}`];
          } else {
            return [0, ''];
          }
        } else {
          return [1, n];
        }
      }, [0, '', true])
      console.log(selectList);
      console.log(selectLength, selectTime);
      if (!selectLength) {
        return Modal.alert({
          title: '预约限制',
          content: '请选择连续的时段',
        })
      }
      if (selectLength > 8) {
        return Modal.alert({
          title: '预约限制',
          content: '预约时长不可超过4个小时',
        })
      }
      setOpen(false);
      onConfirm([selectTime, selectList])
    }
    
    useImperativeHandle(ref, () => ({
      open: () => {
        setOpen(true)
      },
    }));
    return (
        <>
            <span>
                { children(value?.[0]) }
            </span>
            <Popup
              visible={open}
              onMaskClick={() => {
                setOpen(false)
              }}
              onClose={() => {
                setOpen(false)
              }}
              bodyStyle={{ height: '550px' }}
            >
              <Space block direction='vertical' style={{ '--gap-vertical': '0px' }}>
                <Space align='center' style={{ width: '100%', height: '60px', boxSizing: 'border-box', padding: '0 20px', borderBottom: '1px solid #ddd' }}>
                    <b style={{ fontSize: '16px' }}>
                      { spacename }
                    </b>
                    <span style={{ color: '#666' }}>
                      { spaceDesc }
                    </span>
                </Space>

                <div style={{ height: '430px', overflow: 'auto', boxSizing: 'border-box', padding: '20px' }}>
                  <Checkbox.Group value={selectList} onChange={setSelectList}>
                    <Space direction='vertical' block  style={{ '--gap-vertical': '25px' }}>
                      {timeList.map(item => (
                        <Space block align='start' justify='between' key={item.time}>
                          <Checkbox value={item.time} disabled={item.status !== '可预约'}>
                              <span style={{ marginLeft: '12px' }}>
                                {item.time}
                              </span>
                          </Checkbox>
                          <span style={{ color: '#999' }}>
                              {item.status !== '可预约' && item.status}
                          </span>
                        </Space>
                      ))}
                    </Space>
                  </Checkbox.Group>
                </div>

                <Space block align='center' justify='center' style={{ height: '60px', borderTop: '1px solid #ddd' }}>
                    <Button block color="primary" shape='rounded' disabled={!selectList.length} style={{width: '85vw'}}  onClick={onFinish}>
                        确定
                    </Button>
                </Space>
              </Space>
              
            </Popup>
        </>
    )
})

export default Calendar
